<template>
  <div class="main">
    <div class="container">
      <div class="search-content sm-width-96">
        <ul class="search-content-title">
          <li :class="{'li-active': selectActive == -1}" @click="liFun($event, -1)">
            <div>站内</div>
            <div><i class="el-icon-caret-top"></i></div>
          </li>
          <li :class="{'li-active': selectActive == index}" @click="liFun($event, index, item.searchUrl)" v-for="(item,index) in searchList" :key="index" v-if="item.searchStatus != '2'">
            <div>{{ item.searchName }}</div>
            <div><i class="el-icon-caret-top"></i></div>
          </li>
        </ul>
        <div class="border-radius">
          <el-autocomplete class="search-input sm-width-100" placeholder="请输入关键词"
                           v-model="searchValue"
                           :fetch-suggestions="querySearch"
                           @keyup.enter.native="search"
                           :trigger-on-focus="false">
            <el-button slot="append" icon="el-icon-search" @click="search">搜你所想</el-button>
          </el-autocomplete>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data(){
    return{
      searchList: [],
      searchUrl: null,
      searchValue: "",
      restaurants: [],
      selectActive: -1,
    }
  },
  async fetch(){
    await this.$api_search.getList().then(res => {
      if(res.code === 200){
        this.searchList = res.data;
      }
    })
  },
  mounted() {
    if(this.$cookies.get("nav_searchUrl") !== undefined && this.$cookies.get("nav_searchUrl_index") !== undefined){
      this.searchUrl = this.$cookies.get("nav_searchUrl");
      this.selectActive = this.$cookies.get("nav_searchUrl_index");
    }
    this.searchValue = this.value;
  },
  methods: {
    search(){
      if(this.searchValue != null && this.searchValue !== ""){
        if(this.searchUrl != null){
          //站外搜索
          window.open(this.searchUrl + this.searchValue);
        }else{
          this.$emit("changeSearch", this.searchValue);
          //站内搜索
          this.$router.push({
            path:'/search',
            query: {
              keys: this.searchValue
            }
          });
        }
      }else{
        this.$message({
          message: '请填写您要搜索的内容',
          type: 'warning',
          duration: process.env.MSG_TIME
        });
      }
    },
    liFun(e, index, url){
      this.selectActive = index;
      if(url === undefined){
        this.searchUrl = null;
      }else{
        this.searchUrl = "//" + url;
      }
      //增加搜索选择记忆
      this.$cookies.set("nav_searchUrl", this.searchUrl, {
        path: "/",
        maxAge: 60 * 60 * 24 * 30
      });
      this.$cookies.set("nav_searchUrl_index", index, {
        path: "/",
        maxAge: 60 * 60 * 24 * 30
      });
      this.$message({
        message: '切换成功',
        duration: process.env.MSG_TIME,
        type: 'success'
      })
    },
    //返回建议列表
    querySearch(queryString, cb) {
      let _this = this;
      $.ajax({
        url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
        data: {
          wd: queryString
        },
        type: "get",
        dataType: "jsonp",
        jsonp: "cb",   //指定参数名称
        success: function(result) {
          result.s.forEach(function(item){
            let data = {
              value: item
            };
            _this.restaurants.push(data);
            let restaurants = _this.restaurants;
            let results = queryString ? restaurants.filter(_this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          });
        }
      });
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    }
  }
}
</script>

<style scoped>
.main{
width: 100%;
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}
.search-content{
overflow: hidden;
width: 500px;
margin: 0 auto;
padding: 150px 0;
}
.search-content-title{
overflow: hidden;
padding: 0 20px;
}
.search-content-title li{
font-size: 14px;
text-align: center;
float: left;
cursor: pointer;
margin-right: 10px;
}
.search-content-title li:hover{
color: #3498DB;
}
.li-active{
color: #3498DB;
}
.search-content-title .el-icon-caret-top{
font-size: 22px;
}
.search-input{
width: 500px;
}
</style>
<style>
/* 修改element样式 */
.search-input .el-input__inner{
  border-radius: 30px 0 0 30px;
}
.search-input .el-input-group__append{
  color: #FFFFFF;
  background-color: #3498DB;
  border-radius: 0 30px 30px 0;
  border: 1px;
}
</style>
